<template>
  <a-modal
    title="未关联用户"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div class="table-page-search-wrapper">
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入账号模糊查询" v-model="queryParam.username"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入姓名模糊查询" v-model="queryParam.nickname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <vxe-grid
      id="RoleWithoutUser"
      keep-source
      ref="vxeTable"
      :height="null"
      v-bind="gridOptions"
      :toolbar-config="false"
      v-on="listeners"
      :row-config="{keyField:'actorId'}"
    >
    <template v-slot:toolbar_buttons>
      <div class="table-operator">
        <a-button @click="handleAdd" icon="plus" class="theme--perfect-button">添加用户</a-button>
      </div>
    </template>
  </vxe-grid>
  </a-modal>
</template>

<script>
import { getAction } from '@/services/manage'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import { roleAddActors } from '@/services/system'
export default {
  name: 'RoleWithoutUserModal',
  mixins: [VxeTableListMixin],
  props: {
    roleId: {
      type: String
    }
  },
  data() {
    return {
      // title: '添加已有用户',
      visible: false,
      confirmLoading: false,
      columns: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        {
          title: '用户账号',
          field: 'username',
          sorter: true
        },
        {
          title: '用户姓名',
          field: 'nickname'
        },
        {
          title: '是否有效',
          field: 'accountNonExpired',
          slots: { default: ({ row }) => {
            return row.accountNonExpired === true ? '是' : '否'
          } }
        }
      ],
      proxyConfig: {
        autoLoad: false
      }
    }
  },
  methods: {
    add() {
      this.visible = true
      this.loadData()
    },
    handleOk() {
      if (this.selectionRows.length) {
        this.confirmLoading = true
        roleAddActors(this.roleId, this.selectedRowKeys).then(res => {
          if (res.success) {
            this.$emit('ok')
            this.visible = false
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      } else {
        this.$message.warning('请选择关联的用户')
      }
    },
    handleCancel() { // 关闭
      this.close()
    },
    close() {
      this.visible = false
    },
    async loadTableData() {
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      const res = await getAction(`/role/list/${this.roleId}/without`, params)
      this.loading = false
      return res
    }
  }
}
</script>
